<template>
  <scroll class="coupon-wrap" :data="data" v-if="data.length">
    <div class="coupon">
      <dl v-for="item in data" class="coupon-item">
        <dt><span class="title">券号:</span> {{item.card_no}}</dt>
        <dd>
          <div class="left">
            <p>
              <span class="title">优惠金额</span> {{item.amount}}
            </p>
            <p>
              <span class="title">最低消费</span> {{item.fill_amount}}
            </p>
          </div>
          <div class="center">
            <p>
              <span class="title">启用</span> {{item.enable_time | formatDate}}
            </p>
            <p>
              <span class="title">过期</span> {{item.expire_time | formatDate}}
            </p>
          </div>
          <div class="right">
             {{item.status}}
          </div>
        </dd>
      </dl>
    </div>
  </scroll>
  <div class="coupon-wrap" v-else>
    <div class="no-info">暂无优惠券~</div>
  </div>
</template>

<script>
import Scroll from './base/scroll'
import {formatDate} from '@/utils'
import $http from '@/api'
export default {
  data () {
    return {
      data: []
    }
  },
  beforeCreate() {
    $http.couponList()
    .then(res => {
      if (res.code === 0) {
        this.data = res.data
      } else {
        this.$layer.toast({
          content: '网络失败，稍后再试~',
          time: 2000
        })
      }
    })
  },
  components: {
    Scroll
  },
  filters: {
    formatDate(time) {
      let date = new Date(time * 1000)
      return formatDate(date, 'yyyy-MM-dd')
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '~@/assets/styles/config';
  .coupon-wrap{
    height: 100%;
    overflow: hidden;
    background-color: $light;
  }
  .coupon{
    position: relative;
  }
  .coupon-item{
    padding: px2rem(10px);
    border: px2rem(1px) solid darken($light,5%);
    border-width: px2rem(1px) 0;
    font-size: px2rem(12px);
    background-color: $white;
    margin-bottom: px2rem(5px); 
    dt{
      color: $black;
      padding-bottom: px2rem(5px);
      border-bottom: px2rem(1px) solid $light;
      margin-bottom: px2rem(10px); 
    }
    dd{
      display: flex;
      align-items: center;
      color: $darker;
      line-height: 2;
    }
    .title{
      color: $dark;
    }
    .left, .center{
      flex: 1;
    }
    .right {
      width: px2rem(60px);
      text-align: center;
    }
    &:first-child{
      border-top: 0;
    }
    &:last-child{
      margin-bottom: 0;
    }
  }
</style>
